<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>SQL查询</title>
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/modules/laydate/default/laydate.css"/>
    <link rel="stylesheet" href="../assets/custom/css/sql-query.css"/>
</head>
<body>
<div class="openSQL">
    <div class="openSQL_top">
        <div class="top_run"><i class="fa fa-play" style="color: #63CC00;"></i> 运行</div>
        <div class="top_stop"><i class="fa fa-stop" style="color: #D5AEAE;"></i> 停止</div>
        <div class="top_Beautify"><i class="icon-magic-wand" style="color: #F0E24A;"></i> 美化SQL</div>
    </div>
    <div class="data_texta"> <textarea></textarea></div>
    <div class="selectData_table">
        <table class="layui-hide" id="test"></table>
    </div>
    <div class="selectData_foot">
        <div class="selectData_foot_right">
            <span class="foot_item_total">共<b>×</b>条</span>
            <button class="btn grey-mint btn-outline sbold uppercase">count</button>
            <span class="foot_item">第<b>×</b>条于第<b>×</b>页</span>
            <button class="btn grey-mint btn-outline sbold uppercase"><i class="fa fa-angle-double-left"></i></button>
            <button class="btn grey-mint btn-outline sbold uppercase last_btn"><i class="fa fa-angle-double-right"></i></button>
        </div>
    </div>
</div>
</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'test.json'
          //  ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id',width: 100, title: 'C1', sort: true, class : 'fa fa-check'}
                ,{field:'username',width: 100, title: 'C2'}
                ,{field:'sex', width: 100, title: 'C3'}
                ,{field:'city', width: 100, title: 'C4'}//minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
            ]],
            done : function(){
                $('th[data-field="id"]').children().prepend($('<i style="color: #95A5A6;">123</i><i class="icon-key"></i>'));
                $('th[data-field="username"]').children().prepend($('<i style="color: #95A5A6;">abc</i><i style="color: #95A5A6;">T/N</i> ' ));
                $('th[data-field="sex"]').children().prepend($('<i class="icon-calendar"></i> ' ));
                $('th[data-field="city"]').children().prepend($(' <i style="color: #95A5A6;">0101</i>' ));
                $('.layui-table').css('width','100%');
            }
        });
    });
</script>

</html>